/*
 * @Author: silence silence9685@163.com
 * @Date: 2023-04-23 13:14:01
 * @LastEditors: silence silence9685@163.com
 * @LastEditTime: 2023-07-27 16:28:14
 * @FilePath: \lenercom_bluetooth_app\lib\pages\Mine\HelpCenter\HelpCenterPage.dart
 * @Description: 个人中心-选择设备
 */
import 'package:flutter/material.dart';
import '../../../base/SilScaffold.dart';
import '../../../utils/color/ColorUtils.dart';
import 'package:sil_base_widget_package/sil_base_widget_package.dart';

import '../../../utils/router/ARouter.dart';
import 'ProductFaqsPage.dart';
import 'View/HelpTitleView.dart';

class HelpCenterPage extends StatefulWidget {
  const HelpCenterPage({Key? key}) : super(key: key);

  @override
  State<HelpCenterPage> createState() => _HelpCenterPageState();
}

class _HelpCenterPageState extends State<HelpCenterPage> {
  @override
  Widget build(BuildContext context) {
    return SilScaffold(
      sideMargin: 0,
      title: '帮助中心',
      body: mainWidget(),
    );
  }

  mainWidget() {
    return Container(
      margin: EdgeInsets.only(top: 34.w, bottom: 27.w),
      child: Column(
        children: [
          /// 标题
          Container(
            margin: EdgeInsets.symmetric(horizontal: 26.w),
            child: HelpTitleView(title: '选择设备', dividingLineSpace: 32.w),
          ),
          Padding(padding: EdgeInsets.only(bottom: 30.w)),

          /// 设备列表
          Container(height: 100.w, child: listView())
        ],
      ),
    );
  }

  listView() {
    double mainAxisSpacing =
        (MediaQuery.of(context).size.width - 20.w * 3 - 3 * 56.w) / 3.0;
    return GridView.builder(
        padding: EdgeInsets.symmetric(horizontal: 26.w),
        scrollDirection: Axis.horizontal,
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 1,
            mainAxisSpacing: mainAxisSpacing,
            crossAxisSpacing: 10.w,
            childAspectRatio: 90.0 / 56.0),
        itemBuilder: (BuildContext context, int index) {
          return listItem(index);
        },
        itemCount: 1);
  }

  listItem(int index) {
    String productName = 'EMS'; //'产品$index';
    return SilEmptyButton(
      onTapFunc: () {
        ARoute.gotoPage(context, ProductFaqsPage(productName: productName));
      },
      useConstrained: true,
      width: 56.w,
      // color: Colors.yellow,
      child: Column(
        children: [
          /// 产品图片
          SilImage(
            'imgs/common/common_product_front.png',
            width: 56.w,
            height: 70.w,
          ),

          /// 产品名称
          Container(
              height: 18.w,
              child: SilText(
                productName,
                color: ColorUtils.color_font_main,
                fontSize: 12.sp,
                fontWeight: FontWeight.w400,
                margin: EdgeInsets.only(top: 6.w),
              )),
        ],
      ),
    );
  }
}
